// import styles from './ColumnLineChart.less'
import { DualAxes, DualAxesConfig } from '@ant-design/plots';
import React from 'react';

type columnLineChart = {
  time: string;
  '价值/千亿元': number;
  增长幅度: number;
};

interface ColumLineChartProps {
  columLineChartId: string;
  columnLineChartData: Array<columnLineChart>;
}

const ColumnLineChart: React.FC<ColumLineChartProps> = ({
  columnLineChartData,
  columLineChartId,
}) => {
  const config: DualAxesConfig = {
    data: columnLineChartData,
    autoFit: 'true',
    xField: 'time',
    legend: {
      color: {
        itemLabelFontSize: 12,
        itemLabelFill: '#fff',
        itemMarkerFillOpacity: 1,
        itemMarkerStrokeOpacity: 1,
      },
      size: {},
    },
    children: [
      {
        type: 'interval',
        yField: '价值/千亿元',
        style: { maxWidth: 40 },
        label: {
          visible: true,
          position: 'inside',
          fill: 'white',
        },
        interaction: {
          elementHighlight: true,
          elementHighlightByColor: { background: true },
        },
      },
      {
        type: 'line',
        yField: '增长幅度',
        style: { lineWidth: 2 },
        axis: { y: false },
        interaction: {
          tooltip: {
            crosshairs: false,
            marker: false,
          },
        },
      },
    ],
    axis: {
      x: {
        line: true,
        lineStroke: '#fff',
        arrow: true,
        lineArrowSize: 15,
        lineStrokeOpacity: 1,
        tick: true,
        tickStroke: '#fff',
        label: true,
        labelFill: '#fff',
        labelFontSize: 16,
        labelFillOpacity: 1,
      },
      y: {
        line: true,
        lineStroke: '#fff',
        arrow: true,
        lineArrowSize: 15,
        grid: true,
        gridStroke: '#fff',
        gridStrokeOpacity: 1,
        lineStrokeOpacity: 1,
        tick: true,
        tickStroke: '#fff',
        label: true,
        labelFill: '#fff',
        labelFontSize: 16,
        labelFillOpacity: 1,
      },
    },
    scale: {
      y: {
        domain: [0, 100],
      },
    },
    // style: {
    //   fill: '#4bc1fb'
    // }
    // title:'预制菜市场规模及预测',
  };
  return <DualAxes id={columLineChartId} {...config} />;
};

export default ColumnLineChart;
